<template>
    <div class="product">
        <div class="top">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>全部结果</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <ul class="content">
            <li class="good" :data="data" v-for="item in data" :key="item.id">
                <img :src="item.s_goods_photos[0].path" alt="" @click="goDetail(item.id)">
                <h3>{{item.name}}</h3>
                <p>{{item.desc}}</p>
                <p>￥{{item.price}}</p>
                <div class="bnts">
                    <button @click="goDetail(item.id)">查看详情</button>
                    <button>加入购物车</button>
                </div>
            </li>
        </ul>
        <RightAside :classifies="classifies" />
        <div class="search">
            <el-pagination @size-change="handleSizeChange" 
            @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[4,8,12,16]" :page-size="8"
                layout="total, sizes, prev, pager, next, jumper" :total="classifies.length">
            </el-pagination>
        </div>
    </div>
</template>
  
<script>

// 引入侧边栏组件
import RightAside from '../components/RightAside.vue';
export default {
    name: "Search",
    data() {
        return {
            classifies: [],
            currentPage: 1,
            pageSize: 8,
            data: [],
        }
    },
    components: {
        RightAside,
    },
    methods: {
        // 去详情页
        goDetail(id) {
            localStorage.removeItem('goodId')
            this.$router.push({
                name: "detail",
                params: {
                    id,
                }
            })
        },

        //   分页组件
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.data = this.classifies.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val
            // console.log();
            this.data = this.classifies.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);

        },

    },
    async mounted() {
        sessionStorage.getItem("searchgoods")
        this.classifies = JSON.parse(sessionStorage.getItem("searchgoods")),
            console.log(this.classifies);
        this.data = this.classifies.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
        console.log(this.data);
    },
}
</script>
  
<style lang='scss' scoped>
@function vw($w) {
    @return ($w/1349) * 100+vw;
}

.product {
    width: 100%;
    background-color: rgb(226, 229, 231);
    padding-bottom: vw(40);

    .top {
        padding: vw(25) 0 vw(25) vw(70);
    }

    .content {
        width: vw(1210);
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-between;

        .good {
            width: vw(285);
            height: vw(420);
            background-color: #fff;
            text-align: center;
            margin: 0 vw(7) vw(16) vw(7);

            &:hover {
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
            }

            img {
                width: vw(285);
                height: vw(254);
            }

            h3 {
                height: vw(26);
                font-weight: 400;
                font-size: vw(15);
                line-height: vw(26);
                margin: vw(10) vw(10) 0 vw(10);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            p:nth-of-type(1) {
                color: rgb(173, 172, 172);
                height: vw(25);
                font-size: vw(12);
                line-height: vw(25);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            p:nth-of-type(2) {
                color: red;
                font-size: vw(18);
                margin: 0 0 vw(15) 0;
            }

            .bnts {
                margin: 0 vw(50);
                display: flex;
                justify-content: space-between;

                button:nth-of-type(1) {
                    padding: vw(5) vw(8);
                }

                button:nth-of-type(2) {
                    padding: vw(5) vw(8);
                    color: red;
                    // background-color: red;
                }
            }

        }
    }
}

.search {
    width: 100%;
    height: vw(30);
    text-align: center;
    margin-top: vw(15);
}
</style>
  
  